<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<c:url value="/actor" var="actorURL"/>

<div style="margin-top: 3%">

	<table id="jqGrid"></table>
	
	<div id="jqGridPager"></div>

</div>

<div class="contextMenu" id="contextMenu" style="display:none">
        <ul style="width: 300px; font-size: 65%;">
            <li id="add">
                <span class="ui-icon ui-icon-plus" style="float:left"></span>
                <span style="font-size:100%; font-family:Verdana">Agregar</span>
            </li>
            <li id="edit">
                <span class="ui-icon ui-icon-pencil" style="float:left"></span>
                <span style="font-size:100%; font-family:Verdana">Editar</span>
            </li>                
            <li id="del">
                <span class="ui-icon ui-icon-trash" style="float:left"></span>
                <span style="font-size:100%; font-family:Verdana">Eliminar</span>
            </li>                
        </ul>
    </div>


<script>
$(document).ready(function()
{
	var editOptions = {closeAfterEdit: true, mtype: "POST", ajaxEditOptions:{contentType: "application/json;"}, url:"${actorURL}/save", serializeEditData:function (data){data.objectType = "GROUP";delete data.oper;return JSON.stringify(data);}};
	var createOptions = {closeAfterEdit: true, mtype: "PUT", ajaxEditOptions:{contentType: "application/json;"}, url:"${actorURL}/create", serializeEditData:function (data){data.objectType = "GROUP";data.id = generateUUID();delete data.oper;return JSON.stringify(data);}};
	var deleteOptions = {mtype: "DELETE", url:"${actorURL}/delete", onclickSubmit: function(params, postdata){params.url = params.url + "/" + postdata;}};
	
	$("#jqGrid").jqGrid({
        url: "${actorURL}/getGroups",
        mtype: "GET",
        datatype: "json",
        colModel: [
            { label: 'Id', name: 'id', key: true, width: 125, editable: false},
            { label: 'Name', name: 'name', width: 300, editable: true, editrules:{required: true}}
        ],
		viewrecords: true,
		width: $(window).width() * 0.97,
        height: $(window).height() * 0.6,
        rowNum: 20,
        pager: "#jqGridPager",
        caption: "Grupos",
        hidegrid: false,
        cmTemplate:{sortable:false}
    });
	
	$("#jqGrid").navGrid("#jqGridPager",{edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left"}, editOptions, createOptions, deleteOptions);
});
</script>

